<template>
  <div class="g-header">
    <div class="header-top">
      <div class="header-top-inner w flex between">
        <div class="flex">
          <span class="logo"></span>
          <ul class="flex">
            <li><a href="#">发现音乐</a></li>
            <li><a href="#">我的音乐</a></li>
            <li><a href="#">关注</a></li>
            <li><a href="#">商城</a></li>
            <li><a href="#">音乐人</a></li>
            <li><a href="#">下载客户端</a></li>
          </ul>
        </div>

        <div class="flex align_center">
          <div class="search">
            <input type="text" v-model="keywords" @keyup.enter="jump()" />
          </div>
          <div><button class="creater">创作者中心</button></div>
        </div>
      </div>
    </div>
    <div class="header-wrap">
      <div class="header-wrap-inner w">
        <ul class="header-wrap-nav flex">
          <li>
            <SvgIcon
              class="iconfont"
              icon="icon-shangsanjiaoxing-copy"
            ></SvgIcon>
            <a
              @click="navigator('/recommend', 0)"
              :class="{ active: isShow === 0 }"
              >推荐</a
            >
          </li>
          <li>
            <a @click="navigator('/rank', 1)" :class="{ active: isShow === 1 }"
              >排行榜</a
            >
          </li>
          <li>
            <a
              @click="navigator('/songList', 2)"
              :class="{ active: isShow === 2 }"
              >歌单</a
            >
          </li>
          <li>
            <a @click="navigator('/FM', 3)" :class="{ active: isShow === 3 }"
              >主播电台</a
            >
          </li>
          <li>
            <a
              @click="navigator('/singer', 4)"
              :class="{ active: isShow === 4 }"
              >歌手</a
            >
          </li>
          <li>
            <a @click="navigator('/newCD', 5)" :class="{ active: isShow === 5 }"
              >新碟上架</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'commonHeader',
}
</script>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const keywords = ref('')

const isShow = ref(-1)
function navigator(path: string, index: number, params?: any, query?: any) {
  router.push(path)
  isShow.value = index
  // const result = getCloudSearchApi(keywords.value)

  // console.log(result);
}
function jump() {
  console.log('jump')
  // console.log(keywords.value);
  router.push(`/search?keywords=${keywords.value}`)
}
</script>

<style scoped lang="less">
li a {
  display: inline-block;
  color: #cccccc;
  font-size: 14px;
  padding: 0 15px;
}
a:hover {
  background-color: #000000;
}
.header-wrap-nav {
  margin-left: 200px;
  li:nth-child(1) {
    position: relative;
    .iconfont {
      position: absolute;
      top: -12px;
      left: 0;
      font-size: 20px;
      width: 100%;
    }
  }
  li {
    a {
      font-size: 12px;
      display: inline;
      color: #fff;
      border-radius: 10px;
      margin: 0 10px;
    }
    .active {
      background-color: rgba(0, 0, 0, 0.15);
    }
  }
  & a:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.search input {
  width: 158px;
  height: 34px;
  border-radius: 20px;
}
a {
  cursor: pointer;
}
.creater {
  height: 34px;
  width: 90px;
  border-radius: 20px;
  font-size: 12px;
  color: #cccccc;
  background-color: transparent;
  margin-left: 10px;
  border: 1px solid #4f4f4f;
}
.g-header {
  .header-top {
    height: 70px;
    background-color: #242424;
    line-height: 70px;
    .logo {
      display: inline-block;
      width: 190px;
      height: 75px;
      background: url('@/assets/logo/logo.png') no-repeat left center;
    }
  }

  .header-wrap {
    height: 35px;
    line-height: 35px;
    background-color: #c20c0c;
  }
}
</style>
